<template>
  <div class="scroll">
    <example-card title="分页列表" url="http://element.eleme.io/#/zh-CN/component/pagination">
      <div>
        <el-table
            :data="tableData"
            stripe
            max-height="240"
            :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column
              prop="date"
              label="日期"
              sortable
              width="180"
          />
          <el-table-column
              prop="name"
              label="姓名"
              width="180"
          />
          <el-table-column
              prop="address"
              label="地址"
          />
          <el-table-column
              prop="tag"
              label="标签"
              width="100"
          >
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.tag === '家' ? 'primary' : 'success'"
                  close-transition
              >{{scope.row.tag}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100"
          >
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
          <el-pagination
              @size-change="sizeChange"
              @current-change="currentChange"
              layout="total, sizes, prev, pager, next, jumper"
              :page-size="20" :total="100"
              :page-sizes="[10, 20, 30, 40]"
              :current-page="1"
          />
        </div>
      </div>
    </example-card>
  </div>
</template>

<script>
  export default {
    name: "grids_page_view",
    data() {
      return {
        tableData: [{
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }, {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "公司"
        }, {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }, {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "公司"
        }, {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }, {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "公司"
        }, {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家"
        }],
      };
    },
    methods: {
      handleClick(row) {
        console.log("clicked row: ", row);
      },
      sizeChange(pageSize) {
        console.log("pageSize 改变:", pageSize);
      },
      currentChange(pageNumber) {
        console.log("pageNumber 改变:", pageNumber);
      }
    }
  };
</script>

<style scoped>
  .pagination-wrapper {
    padding: 0 10px 10px;
    text-align: right;
  }
</style>
